<template>
  <div class="v-requirement-id g-jc-sb g-pd-l-8">
    <div class="g-one-line content">
      <span v-if="valueData">{{ encrypted ? desensitize(valueData) : valueData }}</span>
    </div>
    <div
      v-if="selected && !isModelDisabled"
      class="g-pd-r-4 img-btn"
    >
      <img
        src="statics/icons/app/iconmore.png"
        class="g-pointer"
        @click="handleClick"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { actionManager } from "@/action/ActionManager";
import { PropertyRow } from "../../types";
import { Ref, computed, inject } from "vue";
import { modelService } from "@/modules/model/service";
import { ActionKey } from "@/action/ActionKey";
import { desensitize } from "@/util/common";

const isModelDisabled = inject("isModelDisabled") as Ref<boolean>;

/**
 * 模型单选-树选择弹窗
 */
const props = defineProps<{
  row: PropertyRow;
  selected?: boolean;
  encrypted?: boolean;
}>();

const valueData = computed(() => {
  return props.row.value as string;
});

const handleClick = async () => {
  const model = await modelService.getModelData(app.activeProject!.id, props.row.modelId);

  const action = actionManager.getAction(ActionKey.manageNumber);

  // toRaw()
  action?.run(model.id);
};
</script>
<style lang="scss" scoped>
.v-requirement-id {
  height: 100%;
  &._disabled {
    cursor: unset;
  }
  .content {
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    > span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  > .img-btn {
    display: flex;
    align-items: center;
  }
}
</style>
